import React from 'react';
import {List,Button, DatePicker, Tools} from 'weaver-mobile';
import { observer, inject} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import '../../style/index'
const getLabel = Tools.getLabel;

const array = [getLabel(19782,'不提醒'),getLabel(390083,'正点'),'0:5','0:10','0:15','0:20','0:30','1:0',];

@inject('viewMeetingStore')
@observer
@withRouter
export default class Remind extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectTime: '00:00',
      selectIndex: -1,
      userdef: false,
    }
  }
  componentDidMount() {
    const { viewMeetingStore:{form} ,remindTargetId} = this.props;
    const { formParams } = form;
    if(remindTargetId === 'starttimebefore') {
      //设置选中索引
      if(formParams['remindBeforeStart'] === '0' || formParams['remindBeforeStart'] === ''){
        this.setState({selectTime:'00:00',selectIndex:0})
      }else if(formParams['remindBeforeStart'] === '1' && 
        formParams['remindHoursBeforeStart'] === '0' && 
        formParams['remindTimesBeforeStart'] === '0'){
          this.setState({selectTime:'00:00',selectIndex:1})
      }else{
        const tempTime = this.getTime(formParams['remindHoursBeforeStart'],formParams['remindTimesBeforeStart']);
        array.forEach((res,index) => {
          if(res === tempTime){
            this.setState({selectIndex:index})
          }
        })
        
        this.setState({selectTime:tempTime})
      }
      //设置选中时间
    }
    if(remindTargetId === 'endtimebefore') {
      //设置选中索引
      if(formParams['remindBeforeEnd'] === '0' || formParams['remindBeforeEnd'] === ''){
        this.setState({selectTime:'00:00',selectIndex:0})
      }else if(formParams['remindBeforeEnd'] === '1' && 
        formParams['remindHoursBeforeEnd'] === '0' && 
        formParams['remindTimesBeforeEnd'] === '0'){
          this.setState({selectTime:'00:00',selectIndex:1})
      }else{
        const tempTime = this.getTime(formParams['remindHoursBeforeEnd'],formParams['remindTimesBeforeEnd']);
        array.forEach((res,index) => {
          if(res === tempTime){
            this.setState({selectIndex:index})
          }
        })
        
        this.setState({selectTime:tempTime})
      }
      //设置选中时间
    }
  }

  getTime = (hour,time)=>{
    if(hour === ''){
      hour = '0';
    }
    if(time === ''){
      time = '0';
    }
    return `${hour}:${time}`
  }

  onclick = (e,index) => {
    let div = document.getElementsByClassName('hide-content-grid');
    let div2 = document.getElementsByClassName('hide-content-grid-userdefine')[0];
    div2.style.background = '';
    if(div){
      for(let i=0; i<div.length; i++) {
        div[i].className = 'hide-content-grid ';
        div[i].selected = false;      
      }
    }
    if(e.target.nodeName === 'DIV'){
      e.target.className = 'hide-content-grid active';
      e.target.selected = true;
      this.setTime(index)
    }else if(e.target.nodeName === 'SPAN') {
      e.target.parentNode.className = 'hide-content-grid active';
      e.target.parentNode.selected = true;
      this.setTime(index)
    }
    this.setState({userdef: false,selectIndex:index})
    return false;
  }

  changeBgcolor = () => {
    let div = document.getElementsByClassName('hide-content-grid');
    if(div) {
      for(let i=0; i<8; i++) {
        div[i].className = 'hide-content-grid ';
        div[i].selected = false;
      }
    }
  }

  changeTimeToMinute = (time) => {
    let str = time.split(':');
    if(str.length > 1){
      return parseInt(str[0], 10)*60 + parseInt(str[1], 10);
    }else{
      return time;
    }
  }

  userDefine = (data) => {
    // let str = data.split(':')
    // let hour = parseInt(str[0], 10) === 0 ? '' : parseInt(str[0], 10)+"小时";
    // let minte = parseInt(str[1], 10) === 0 ? '' : parseInt(str[1], 10)+'分钟'
    // str = hour + minte;
    this.setState({userdef: true,selectTime:data,selectIndex:-1});
    this.setTime(-1,data);
  }

  onOk = () => {
    let div = document.getElementsByClassName('hide-content-grid');
    if(div){
      for(let i=0; i<div.length; i++) {
        div[i].className = 'hide-content-grid ';
        div[i].selected = false;
      }
    }
    this.changeBgcolor()
    return false;
  }

  submit = () => {
    this.props.history.go(-1)
    return false;
  }

  //index属性是代表选中array中的值,data代表是自定义的值
  setTime = (index,date) => {
    const { remindTargetId, viewMeetingStore:{form} } = this.props;
    if(remindTargetId === 'starttimebefore') {
      if(index === 0){
        form.updateField('remindTimesBeforeStart','0')
        form.updateField('remindHoursBeforeStart','0')
        form.updateField('remindBeforeStart','0')
      }else if(index === 1){
        form.updateField('remindTimesBeforeStart','0')
        form.updateField('remindHoursBeforeStart','0')
        form.updateField('remindBeforeStart','1')
      }else if(index === -1){
        date = this.changeTimeToLabel(date)
        form.updateField('remindTimesBeforeStart',date.split(':')[1])
        form.updateField('remindHoursBeforeStart',date.split(':')[0])
        form.updateField('remindBeforeStart','1')
      }else{
        form.updateField('remindTimesBeforeStart',array[index].split(':')[1])
        form.updateField('remindHoursBeforeStart',array[index].split(':')[0])
        form.updateField('remindBeforeStart','1')
      }
    }
    if(remindTargetId === 'endtimebefore') {
      if(index === 0){
        form.updateField('remindTimesBeforeEnd','0')
        form.updateField('remindHoursBeforeEnd','0')
        form.updateField('remindBeforeEnd','0')
      }else if(index === 1){
        form.updateField('remindTimesBeforeEnd','0')
        form.updateField('remindHoursBeforeEnd','0')
        form.updateField('remindBeforeEnd','1')
      }else if(index === -1){
        date = this.changeTimeToLabel(date)
        form.updateField('remindTimesBeforeEnd',date.split(':')[1])
        form.updateField('remindHoursBeforeEnd',date.split(':')[0])
        form.updateField('remindBeforeEnd','1')
      }else{
        form.updateField('remindTimesBeforeEnd',array[index].split(':')[1])
        form.updateField('remindHoursBeforeEnd',array[index].split(':')[0])
        form.updateField('remindBeforeEnd','1')
      }
    }
  }
 
  changeTimeToLabel = (date) => {
    let hourTemp = date.split(':')[0]
    let timeTemp = date.split(':')[1]
    if(parseInt(hourTemp,10) < 10 && hourTemp.length ===2){
      hourTemp = hourTemp.substr(1,1)
    }
    if(parseInt(timeTemp,10) < 10 && timeTemp.length ===2){
      timeTemp = timeTemp.substr(1,1)
    }
    return `${hourTemp}:${timeTemp}`
  }

  render() {
    let temp = false;
    let classname = '';
    return (
      <div>
        <div className="hide">
          <div className="hide-content">
            {
              array.map((res,index) => {
                if(!temp){
                  temp = index === this.state.selectIndex;
                }
                classname = index === this.state.selectIndex && !this.state.userdef ?  "hide-content-grid active" : "hide-content-grid";
                let time = res.split(':')
                let label = '';
                let t = parseInt(time[0], 10)*60 + parseInt(time[1], 10)
                let tt = t%60 + parseInt(t/60, 10);
                let T = isNaN(tt) ? time[0] : tt;
                if(!isNaN(t)){
                  label = t>=60 ? getLabel(382424, '小时前') : getLabel(382425, '分钟前'); 
                }
                let css = label ? 'span-style' : '';
                return <div time={res} selected={false} key={res} className={classname} onClick={(e) => this.onclick(e,index)}><span className={css}>{T}</span><br/><span className="time-span" style={{fontSize:12}}>{label}</span></div>
              })
            }
           
            { 
              <div className= {"hide-content-grid"} onClick={(e) => {}}>
                <DatePicker
                  mode="time"
                  onChange={time => this.userDefine(time) }
                  onOk={() => this.onOk()}
                  value={this.state.selectTime}
                >
                  <List.Item  className={!temp?"hide-content-grid-userdefine active":"hide-content-grid-userdefine"}>{getLabel(19516, '自定义')}</List.Item>
                </DatePicker>
              </div>
            }
            
          </div>
            
          <div className="hide-button">
            <Button type="primary" onClick={() => this.submit()}>{getLabel(386788,'确定')}</Button>
          </div>
        </div>
      </div>
    );
  }
}